<template>
	<a-modal v-model="visible" :destroyOnClose="true" :maskClosable="false" :title="title" :width="500" @cancel="closeModal">
		<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
			<!-- 字典名称 -->
			<a-form-model-item label="字典名称" prop="label" ref="label">
				<a-input v-model="form.label" :placeholder="placeholder.label" />
			</a-form-model-item>
			<!-- 字典键值 -->
			<a-form-model-item label="字典键值" prop="value" ref="value">
				<a-input v-model="form.value" :placeholder="placeholder.value" />
			</a-form-model-item>
			<!-- 字典排序 -->
			<a-form-model-item label="排序值" prop="sort" ref="sort">
				<a-input-number :placeholder="placeholder.sort" :min="0" :max="99" v-model="form.sort" />
			</a-form-model-item>
			
		</a-form-model>
		<!-- Modal 页脚 -->
		<template slot="footer">
			<a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
		</template>
	</a-modal>
</template>
<script>
	import {dictionaryMxAdd,dictionaryMxUpdate}  from '../public/http.js'
	export default {
		props: ['dictionaryCode', 'editRecord'],
		data() {
			return {
				isupdate: false, //是否是更新模式			
				title: "新建键值对",
				loading: false,
				visible: true,
				labelCol: {
					span: 4
				},
				wrapperCol: {
					span: 20
				},
				form: {
					code: '',
					label: '',
					value: '',
					sort: 10
				},
				placeholder: {
					label: '请设置选项标签 EG:待付款',
					value: '请设置选项键值 EG:0',
					sort: '请设置字典显示排序'
				},
				rules: {
					label: {
						required: true,
						message: '请设置字典键名',
						trigger: 'blur'
					},
					value: [{
						required: true,
						message: '请设置字典键值',
						trigger: 'blur'
					}, {
						pattern: /^[a-zA-Z0-9_]+$/,
						message: '字典键键值只允许数字、字母、和下划线',
						trigger: 'blur'
					}],
					sort: [{
						required: true,
						message: '请设置字典排序',
						trigger: 'blur'
					}, {
						type: 'number',
						message: '字典排序只允许设置为数字',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			//表单提交事件
			onSubmit() {
				this.$refs.ruleForm.validate(valid => {
				
					if (valid) {
						if (this.isupdate) {
							dictionaryMxUpdate(this.editRecord.id, this.form).then(res => {
								 
								//删除字典缓存
								this.$store.commit('delDict', this.dictionaryCode);
								//消息提醒
								this.xhrMsg(res);
							});
						} else {
							dictionaryMxAdd(this.form).then(res =>{
								//删除字典缓存
								this.$store.commit('delDict', this.dictionaryCode);
								//消息提醒
								this.xhrMsg(res)
							} );
						}
					}
				});
			},
			//新增和删除返回相同的消息构造
			xhrMsg(res) {
				if (res.code == 0) {
					//成功提醒
					this.$notification.success({
						message: '操作成功',
						description: res.message,
					});
					this.visible = false;
					this.$emit('closeFun', {
						render: true
					});
				} else {
					//错误提醒
					this.$notification.error({
						message: '操作失败',
						description: res.message,
					});
				}
				this.loading = false;
			},
			//关闭编辑器
			closeModal() {
				this.visible = false;
				this.$emit('closeFun', {
					render: false
				});
			},
			//初始化模态框 决定用是修改还是新增
			fromVal() {
				let obj = {...this.editRecord};
				if (obj.id) {
					this.form = obj;
					this.isupdate = true;
					this.title = "编辑选项"
				
				}
				this.form.code = this.dictionaryCode
			},
			//数据初始化
			async init() {	 
				this.fromVal();
			}
			
		},
		created() {
			this.init();
		}
	};
</script>
